<template>
	<view class="greyBox ">
		<view class="form">
			<u-form :model="ruleForm" ref="uForm" label-width="200">
				<view class="grey"></view>
				<u-form-item label="发货交易单" prop="car" required>
					<u-input required v-model="ruleForm.orderId" disabled="true" @click="shows.order = true"
						placeholder="请选择订单" input-align="right" />
				</u-form-item>
				<u-form-item v-if="ruleForm.orderId" label="车辆信息" prop="car" required>
					<u-input :value="ruleForm.vinList.join(',')" required input-align="right" disabled="true"
						@click="handleCarsOpen" placeholder="请选择车辆信息" />
				</u-form-item>
				<block v-if="orderItems">
					<view class="grey"></view>
					<view class="orderInfo">
						<view class="pic">
							<img :src="orderItems.product.productDetail.prodcutPicList.thumbnailUrl" alt="" />
						</view>
						<view class="info">
							<view class="name">{{orderItems.productInfo}}</view>
							<view class="num">x {{ orderItems.productAmount}}</view>
						</view>
					</view>
					<view class="grey"></view>
					<u-form-item label="成交方式" prop="type">
						<u-input required :value="orderItems.tradeMode" disabled input-align="right" />
					</u-form-item>
					<u-form-item label="启运港" prop="startHarbor">
						<u-input required :value="orderItems.startHarborName" disabled input-align="right" />
					</u-form-item>
					<u-form-item label="目的港" prop="endHarbor">
						<u-input required :value="orderItems.endHarborName" disabled input-align="right" />
					</u-form-item>
				</block>
			</u-form>
		</view>
		<view class="actions">
			<u-button :custom-style="buttonStyle" type="success" @click="handleSubmit" shape="circle">
				提交发货单
			</u-button>
		</view>
		<u-select value-name="id" label-name="id" v-model="shows.order" :list="orders"
			@confirm="onOrderChange"></u-select>
		<c-cars-select v-model="shows.cars" :checks="ruleForm.vinList" :cars="cars" @submit="onCarsChange" />
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import cCarsSelect from './components/c-cars-select.vue'
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js";
	export default {
		components: {
			cCarsSelect
		},
		data() {
			return {
				buttonStyle,
				shows: {
					order: false,
					cars: false
				},
				orders: [],
				cars: [],
				orderItems: null,
				ruleForm: {},

			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async onLoad(options) {
			const list = await this.$api.getDeliveryOrder();
			this.orders = list.result
			if (options.id) {
				const res = await this.$api.getDeliveryById(options)
				const orderId = res.result.deliveryList.orderId
				this.ruleForm = {
					orderId,
					id: res.result.deliveryList.id,
					vinList:res.result.carList.map(x=>x.vin)
				}
				this.orderItems = list.result.find((x) => x.id === orderId);
			}
		},
		methods: {
			handleCarsOpen() {
				const params = {
					orderId: this.ruleForm.orderId
				}
				this.$api.getDeliveryCars(params).then(res => {
					this.cars = res.result
					this.shows.cars = true
				})

			},
			onOrderChange(list) {
				const item = this.orders.find(x => {
					return x.id === list[list.length - 1].value
				})
				this.ruleForm.orderId = item.id
				this.ruleForm.vinList = []
				this.orderItems = item
			},
			onCarsChange(list) {
				this.ruleForm.vinList = list.map(x => {
					return x.vin
				})
			},
			async handleSubmit() {
				const item = JSON.parse(JSON.stringify(this.ruleForm))
				if (!item.orderId) {
					this.$toast('请选择交易订单', this)
					return
				}
				if (item.vinList <= 0) {
					this.$toast('请选择车辆信息', this)
					return
				}
				if (item.id) {
					await this.$api.getDeliveryReapply(item)
				} else {
					await this.$api.getDeliveryApply(item)
				}
				uni.navigateBack({
					delta: -1
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.form {
		.orderInfo {

			border-radius: 16rpx;
			display: flex;
			background: #FFF;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.pic {
				height: 120rpx;
				width: 160rpx;
				line-height: 0;
			}

			.info {
				padding: 14rpx 0;
				margin-left: 20rpx;

				.name {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #202020;
					line-height: 40rpx;
					margin-bottom: 20rpx;
				}

				.num {
					font-size: 26rpx;
					font-family: Helvetica;
					color: #919191;
					line-height: 32rpx;
				}
			}
		}

		margin-bottom: 20rpx;

		/deep/.u-form-item {
			padding-left: 30rpx;
			padding-right: 30rpx;
			background: #FFF;
			font-size: 34rpx;
		}

		/deep/.u-form-item--left__content {
			padding-left: 10rpx;
		}
	}

	.actions {
		width: 670rpx;
		margin: 60rpx auto;
	}

	.sortTitle {
		padding-left: 30rpx;
		font-size: 26rpx;
		color: #969696;
		height: 46rpx;
		line-height: 36rpx;
	}
</style>